<!DOCTYPE html>
<!--
-- ━━━━━━神兽出没━━━━━━
--  　　　┏┓　　　┏┓
--  　　┏┛┻━━━┛┻┓
--  　　┃　　　　　　　┃
--  　　┃　　　━　　　┃
--  　　┃　┳┛　┗┳　┃
--  　　┃　　　　　　　┃
--  　　┃　　　┻　　　┃
--  　　┃　　　　　　　┃
--  　　┗━┓　　　┏━┛
--  　　　　┃　　　┃  神兽保佑
--  　　　　┃　　　┃  代码无bug　　
--  　　　　┃　　　┗━━━┓
--  　　　　┃　　　　　　　┣┓
--  　　　　┃　　　　　　　┏┛
--  　　　　┗┓┓┏━┳┓┏┛
--  　　　　　┃┫┫　┃┫┫
--  　　　　　┗┻┛　┗┻┛
-- ━━━━━━感觉萌萌哒━━━━━━
-->

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS3实现跑马灯效果</title>
  <style>
    #wrapper{
      width:200px;
      height:50px;
      margin: 100px auto;
      padding: 10px;
      font-size: 20px;
      border: solid 1px black;
      position: relative;
      overflow: hidden;
    }
    #horse{
      position: absolute;
      width:200px;
      -webkit-animation:horse 3s linear 0s infinite;
    }
    @-webkit-keyframes horse
    {
      0%   {left:0px;top:0px;background-color: yellow;}
      47%  {left:220px;top:0px;}
      48%  {left:220px;top:100px;}
      49%  {left:-200px;top:100px;}
      50%  {left:-200px;top:0px;background-color: red;}
      100% {left:0px;top:0px;background-color: yellow;}
    }

  </style>
  <script>

  </script>
</head>

<body>
<div id="wrapper">
  <div id="horse"> <span style="font-family: Arial, Helvetica, sans-serif;">CSS3</span><span style="font-family: Arial, Helvetica, sans-serif;">实现的跑马灯效果</div></span>
</div>
</body>
</html>
